<html>
<head>
<script type='text/javascript' src='openlayers/OpenLayers.js'></script>
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript' src="proj4js/lib/proj4js-combined.js"></script>
<script type='text/javascript' src='http://www.openstreetmap.org/openlayers/OpenStreetMap.js'></script>
<script type='text/javascript' src='http://www.free-map.org.uk/javascript/ezol.js'></script>
  
  <script type='text/javascript'>               
      
	  var size = new OpenLayers.Size(25,25);
	  var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
	  var icon = new OpenLayers.Icon('ako.jpg', size, offset);	      
	  var icon2 = new OpenLayers.Icon('red.png', size, offset);
	  
	  var oneMarker = new OpenLayers.Layer.Markers("Hospital");
	  var twoMarker = new OpenLayers.Layer.Markers("Restaurant");
	  var threeMarker = new OpenLayers.Layer.Markers("Evacuation Center");
      var map, controls;
                             
      OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
          defaultHandlerOptions: {
              'single': true,
              'double': false,
              'pixelTolerance': 0,
              'stopSingle': false,
              'stopDouble': false
          },

          initialize: function(options) {
              this.handlerOptions = OpenLayers.Util.extend(
                  {}, this.defaultHandlerOptions
              );
              OpenLayers.Control.prototype.initialize.apply(
                  this, arguments
              ); 
              this.handler = new OpenLayers.Handler.Click(
                  this, {
                      'click': this.onClick
                  }, this.handlerOptions
              );
          }, 
                      
      onClick: function(e) {
            
		var output1 = document.getElementById(key + "Output1");
		var output2 = document.getElementById(key + "Output2");	
		
		var xy = map.getLonLatFromViewPortPx(e.xy);			
		var lonlat = xy.transform(map.projection, map.displayProjection);
				
		var Longitude = lonlat.lon;
		var Latitude = lonlat.lat;
	                                
		output1.value = "";
		output2.value = "";
	
		output1.value = output1.value + Longitude;
		output2.value = output2.value + Latitude;
						
        var lonLat = new OpenLayers.LonLat(output1.value, output2.value).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());

        var x = document.getElementById("poi");
        var strUser = x.options[x.selectedIndex].value;

        // alert(strUser);
		if (strUser == "1") {       
		 oneMarker.addMarker(new OpenLayers.Marker(lonLat, icon)); // add markers
	     oneMarker.addMarker(new OpenLayers.Marker(lonLat, icon.clone())); // icon.clone() to use the same custom icon     
	 		} else if (strUser == "2") {       
			 twoMarker.addMarker(new OpenLayers.Marker(lonLat, icon2));
		     twoMarker.addMarker(new OpenLayers.Marker(lonLat, icon2.clone()));    
		 	} else if (strUser == "3") {       
				 threeMarker.addMarker(new OpenLayers.Marker(lonLat));    
			 	} 
	 	 }
       });
  
	var key = "single";       	 
  
           
  function init()
	{       
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution()],
			numZoomLevels: 14,
			units: 'mi',
			projection: new OpenLayers.Projection("EPSG:900913"),
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		map.addLayer(oneMarker); 
		map.addLayer(twoMarker); 
		map.addLayer(threeMarker); 
	    	
    //Set start centerpoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom); 

	var click = new OpenLayers.Control.Click();
	map.addControl(click);
	click.activate();

    var output1 = document.getElementById(key + "Output1");
        output1.value = "";
		var output2 = document.getElementById(key + "Output2"); 
        output2.value = "";
 
	}
           
</script>
</head>
<body onload="init()">     
 
<div id="mapdiv"></div>
	<div id="east">
	<form name="form" method="post" action="testSuccess.php">    
    Longitude:<input type="text" id="singleOutput1" name="output1"> Latitude:<input type="text" id="singleOutput2" name="output2">
    Points of Interest:
    	<select id="poi" name="poi">
		<option value="1">Hospital</option>
		<option value="2">Restaurant</option>
		<option value="3">Evacuation Center</option>
		<option value="4">Clinic</option>
		<option value="5">Fire Department</option>
		</select>	
    <input type="submit" value="Submit" name="testSubmit">
	</form>
	</div>
</body>
</html>	
